.container {
    width: 7.5rem;
    margin: 0 auto;
    background-color: #f2f2f2;
    height: 13.6rem;
    .header{
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        width: 100%;
        height: .88rem;
        background-color: #FF6040;
        padding:.27rem .36rem .27rem .36rem;
        .a{
            color: #FFFFFF;
            font-family: Helvetica;
            font-size: 0.32rem;
            width:.09rem ;
            height:.17rem;
            opacity: 0.8;
        }
        .b{
            opacity: 0.8;
            font-family: Helvetica;
            font-size: 0.32rem;
            color: #FFFFFF;
            text-align: center;
        }
    }
    .body{
        position: relative;
        height: 4.25rem;
        background-color: #FF6040;
       .nav{
           width: 100%;
           height: 1.75rem;
           background-color: #FF6040;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: .23rem 0 .23rem .2rem;
           .a{
               display: flex;
               align-items: center;
               img{
                  border-radius:60%;
                  width: 1.3rem;
                  height: 1.3rem;
               }
               .b{
                   span{
                    font-family: PingFangSC-Semibold;
                    font-size: .36rem;
                    color: #FFFFFF;
                   }
                   div{
                    margin-top: .25rem;
                    font-family: PingFangSC-Regular;
                    font-size: .2rem;
                    color: #FFFFFF;
                    border: 1px solid  #FFFFFF;
                   }
               }
              
           }
           .c{
            position: relative;
            width: 1.55rem;
            height: .4rem;
            background-color: #ffd5cc;
            font-family: PingFangSC-Regular;
            font-size: .2rem;
            color: #FF6243;
            text-align: center;
            line-height: .4rem;
            border-radius: .2rem 0  0 .2rem;
            &::before{
                content: '';
                position: absolute;
                top: .04rem;
                left: .07rem;
                width: .32rem;
                height: .32rem;
                background: url(../icons/red_envelopes.png) no-repeat;
                background-size: .32rem auto;
            }
        }
       }
       .nav1{
           width: 100%;
           height: .7rem;
           background-color: #FF6040;
           
           ul{
               display: flex;
               li{
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                   align-items: center;
                   span{
                    font-family: PingFangSC-Semibold;
                    font-size: .36rem;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: .28rem;
                   }
                   i{
                       margin-top: .12rem;
                    font-family: PingFangSC-Light;
                    font-size: .2rem;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: .2rem;
                   }
               }
           }
       }
       .box{
           padding: .22rem ;
           width: 7.13rem;
           height: 2.07rem;
           background-color: #fff;
           position: absolute;
           top: 2.71rem;
           left: .2rem;
           border-radius: 0.1rem;
           .a{
               height: .7rem;
               display: flex;
               justify-content: space-between;
               span{
                font-family: PingFangSC-Semibold;
                font-size: .32rem;
                color: #333333;
                line-height: .32rem;
               }
               i{
                font-family: PingFangSC-Regular;
                font-size: .24rem;
                color: #FF6040;
                line-height: .24rem
            }
           }
           ul{
               display: flex;
               li{
                   flex: 1;
                  a{
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      img{
                          width: .66rem;
                          height: .55rem;
                      }
                  }
               }
           }
       }
    }
    .foot{
        margin-top: .75rem;
        width: 100%;
        height: 5.2rem;
        background-color: #fff;
        ul{
            display: flex;
            flex-direction: column;
            li{
                // flex: 1;
                margin-top: .08rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .a{
                    display: flex;
                    align-items: center;
                    img{
                        margin:.2rem;
                        width: .35rem;
                        height: .35rem;
                    }
                    span{
                        font-family: PingFangSC-Semibold;
                        font-size: .24rem;
                        color: #333333;
                        line-height:  .24rem;
                    }
                }
                .b{
                    margin:20px ;
                    font-family: PingFangSC-Light;
                    font-size: .24rem;
                    color: #666666;
                    line-height: .24rem;
                }
            }
        }
    }
    }